﻿<script src="../js/app/org-dept-users.js"></script>
<div class="row wrapper border-bottom white-bg page-heading"> <div class="col-lg-10"> <h2>部门人员</h2> <ol class="breadcrumb"> <li> <a href="index.html">首页</a> </li> <li> <a>工作流</a> </li> <li class="active"> <strong>我的流程</strong> </li> </ol> </div> <div class="col-lg-2"> </div> </div>
	<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="aside-left">
					<div class="left-box">
						<div class="input-group">
							<input type="text" placeholder="搜索" class="input form-control">
							<span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
                                </span>
						</div>
						<a class="btn btn-white btn-bitbucket dept-btn" onclick="handleNewDeptClick()">
							<i class="fa fa-plus-circle"></i>&nbsp;添加部门
						</a>
					<div class="left-tree">
						<input type="hidden" id="selectedDeptId" />
						<div id="tree"></div>
					</div>
					</div>
				</div>
				<div class="aside-right">
					<a onclick="sideShow(this)" class="aside-toggle-btn aside-toggle-show"></a>
					<div class="row">
						<div class="col-sm-4"><h5>全部成员 · <b class="text-warning" id="usersQty">0</b></h5></div>
						<div class="col-sm-8 text-right"><button type="button" class="btn btn btn-info"> 添加岗位 </button>&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn btn-primary" onclick="handleOpenCreateUser()"> 添加成员 </button></div>
					</div>
					<div>
					<table id="userList" class="table table-striped table-bordered table-hover  dataTable">
						<thead>
						<tr>
							<th style="text-align:center;">编号</th>
							<th style="text-align:center;">用户名</th>
							<th style="text-align:center;">工号</th>
							<th style="text-align:center;">姓名</th>
							<th style="text-align:center;">创建时间</th>
							<th style="text-align:center;">岗位</th>
							<th style="text-align:center;">操作</th>
						</tr>
						</thead>
					</table>
					</div>
				</div>
			</div>

		<!--<a data-toggle="popover" data-placement="right"-->
		   <!--data-content="<img src='http://10.1.8.109:8250/csm-api/temp/qrcode?empNo=TP2' />">asdasd</a>-->
	</div>

<div>
<!-- 模态框（表单） -->
<div class="modal right fade" id="editUserDlg">
	<div class="modal-dialog" style="width:620px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">编辑人员</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<input type="hidden" id="editId" />
					<div class="form-group">
						<label class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-10"><input id="editDisplayName" type="text" class="form-control" /></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">工号</label>
						<div class="col-sm-10"><input id="editNum" type="text" class="form-control" /></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">登录名</label>
						<div class="col-sm-10"><input id="editName" type="text" class="form-control" disabled /></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">密码</label>
						<div class="col-sm-10"><input id="editPassword" type="password" class="form-control" placeholder="输入新密码"/></div>
					</div>
					<div id="editDepts"></div>
					<!--<div class="form-group">-->
						<!--<label class="col-sm-2 control-label">是否主管</label>-->
						<!--<div class="col-sm-2 switcher">-->
							<!--<input class="btswitch btswitch-ios" id="editIsManager" type="checkbox"><label class="btswitch-btn" for="editIsManager" onclick="editIsManagerChange()"></label>-->
						<!--</div>-->
						<!--<div class="col-sm-8 switcher">-->
							<!--<span class="label label-info"></span>-->
						<!--</div>-->
					<!--</div>-->
					<div class="form-group">
						<label class="col-sm-2 control-label" style="padding-top:8px">岗位</label>
						<div class="col-sm-10"><select id="editPosts" title="-请选择-" class="form-control selectpicker" multiple data-style="btn-white">
						</select></div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" onclick="updateUser()"> 修 改 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>
<div>
<!-- 模态框（表单） -->
<div class="modal right fade" id="newDeptDlg">
	<div class="modal-dialog" style="width:620px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">添加部门</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">父级部门</label>
						<div class="col-sm-10"><input id="newParentDeptName" type="text" class="form-control" disabled/></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">部门名称</label>
						<div class="col-sm-10"><input id="newDeptName" type="text" class="form-control" /></div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" onclick="saveNewDept()"> 创 建 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>
<div>
<!-- 模态框（表单） -->
<div class="modal right fade" id="newUserDlg">
	<div class="modal-dialog" style="width:620px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">添加人员</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">部门名称</label>
						<div class="col-sm-10"><input id="newUserDeptName" type="text" class="form-control" disabled/></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-10"><input id="newDisplayName" type="text" class="form-control" /></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">工号</label>
						<div class="col-sm-10"><input id="newNum" type="text" class="form-control" /></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">登录名</label>
						<div class="col-sm-10"><input id="newName" type="text" class="form-control" placeholder="创建后不能修改"/></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" style="padding-top:8px">岗位</label>
						<div class="col-sm-10"><select id="newPosts" title="-请选择-" class="form-control selectpicker" multiple data-style="btn-white">
						</select></div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" onclick="saveNewUser()"> 创 建 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>
<div>
<!-- 模态框（表单） -->
<div class="modal right fade" id="copyUserDlg">
	<div class="modal-dialog" style="width:620px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">复制人员</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<input type="hidden" id="selectedUserId" />
					<div class="alert alert-warning">将 <b></b> 复制到</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">新部门</label>
						<div class="col-sm-10">
							<div name="deptTree" class="form-group">

								<div class="col-sm-8">
									<input type="text" class="taginput depttree" placeholder="点击选择"/>
									<input type="hidden" />
									<div class="stv"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" style="padding-top:8px">新岗位</label>
						<div class="col-sm-10"><select id="copyPosts" title="-请选择-" class="form-control selectpicker" multiple data-style="btn-white">
						</select></div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" onclick="handleCopyUser()"> 复 制 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>
<div>
<div>
<!-- 模态框（表单） -->
<div class="modal right fade" id="newPostDlg">
	<div class="modal-dialog" style="width:620px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">添加岗位</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">岗位编码</label>
						<div class="col-sm-10"><input type="text" class="form-control"/></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">岗位名称</label>
						<div class="col-sm-10"><input type="text" class="form-control"/></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">岗位标签</label>
						<div class="col-sm-10"><input type="text" class="form-control"/></div>
					</div>
				</div>
				<div class="row form-horizontal">
					<div class="table"></div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary"> 新 增 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</div>
<div>
<script id="EditUserPosts_Tpl" type="text/html">
	{{# for(var i=0; i<d.posts.length; i++){ }}
	<div class="form-group" data="{{d.posts[i].deptId}}" id="{{d.posts[i].code}}{{d.posts[i].deptId}}{{d.posts[i].userId}}">
			<label class="col-sm-2 control-label">部门岗位</label>
			<div class="col-sm-3"><select class="form-control">
				{{# for(var j=0; j<d.options.length; j++){ }}
					<option value="{{d.options[j].code}}"
							{{# if (d.options[j].code==d.posts[i].code) { }}
								selected
							{{# } }}
					>{{d.options[j].name}}</option>
				{{# } }}
			</select>
			</div>
			<div class="col-sm-6" style="padding-top:8px;">
			<span class="label label-info">{{d.posts[i].fullPathName}}</span>
			</div>
			<div class="col-sm-1">
				<button class="btn btn-danger btn-circle"  onclick="delUserPost(this,'{{d.posts[i].deptId}}','{{d.posts[i].userId}}','{{d.posts[i].code}}')" type="button"><i class="fa fa-times"></i></button>
			</div>
	</div>
	{{# } }}
</script>
<style type="text/css">
.form-box{
	background-color: #fff;
	/* margin-bottom:20px;border-style:solid solid none;
    border-width:1px 0px;color:inherit;
    border-color:#e7eaec;border-image:none;
    padding:15px 20px 20px 20px */
}
.form-box-title{
	padding-left: 20px;
	/* padding-bottom: 5px;
    min-height: 48px; */
}
.left-box{
	margin-top: 20px;
	margin-left: 10px;
}
.left-tree{
	margin-top: 20px;
}
.dept-btn{
	margin-top: 20px;
	width: 100%;
	border: 1px dashed #DCDFE6;
}
.tree{
	overflow: auto;
	width:80px;
	height: 500px;
}
.el-tree {
	min-width: 100%;
	display:inline-block !important;
}
.el-aside {
	height: 100%;
}
.el-tree-node__label{
	min-height: 48px;
}
.aside-left {
	/* border-left: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid; */
	border-color: #dcdcdc;
	height: 100%;
	background-color: #fff;
	/* margin-right: 20px; */
	min-height: 500px;
	float:left;
	width:200px;
}
.aside-right {
	padding:20px;
	/* border-left: 1px solid; */
	/* border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid; */
	border-color: #dcdcdc;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
	position: relative;
	min-height: 500px;
}
.aside-toggle-btn{
	width: 18px;
	height: 60px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -30px;
	z-index: 11;
	cursor: pointer;
	background-size: 100% 100%;
}
.aside-toggle-show {
	background: url("static/img/leftTree-show.png") no-repeat -2px 0;
}
.aside-toggle-hide {
	background: url("static/img/leftTree-hide.png") no-repeat -2px 0;
}
</style>
<style>
	.btswitch {
		display: none;
	}

	.btswitch+.btswitch-btn {
		outline: 0;
		display: block;
		width: 3em;
		height: 1.8em;
		position: relative;
		cursor: pointer;
	}

	.table-hover>tbody>tr:hover .btswitch+.btswitch-btn{
		z-index: auto;
	}
	.index-item .btswitch-ios+.btswitch-btn{
		z-index: auto;
	}
	.btswitch+.btswitch-btn:after,
	.btswitch+.btswitch-btn:before {
		position: relative;
		display: block;
		content: "";
		width: 50%;
		height: 100%
	}

	.btswitch+.btswitch-btn:after {
		left: 0
	}

	.btswitch+.btswitch-btn:before {
		display: none
	}

	.btswitch:checked+.btswitch-btn:after {
		left: 50%
	}

	.btswitch-ios+.btswitch-btn {
		background: #cdcdcd;
		border-radius: .9em;
		padding: 2px;
		-webkit-transition: all .4s ease;
		transition: all .4s ease;
		border: 1px solid #e8eae9
	}

	.btswitch-ios+.btswitch-btn:after {
		border-radius: .9em;
		background: #fbfbfb;
		-webkit-transition: left .3s cubic-bezier(.175, .885, .32, 1.275), padding .3s ease, margin .3s ease;
		transition: left .3s cubic-bezier(.175, .885, .32, 1.275), padding .3s ease, margin .3s ease;
		-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 0 rgba(0, 0, 0, .08);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 0 rgba(0, 0, 0, .08)
	}

	.btswitch-ios+.btswitch-btn:active {
		-webkit-box-shadow: inset 0 0 0 2em #e8eae9;
		box-shadow: inset 0 0 0 2em #e8eae9
	}

	.btswitch-ios+.btswitch-btn:active:after {
		padding-right: .8em
	}

	.btswitch-ios:checked+.btswitch-btn {
		background: #20a53a
	}

	.btswitch-ios:checked+.btswitch-btn:active {
		-webkit-box-shadow: none;
		box-shadow: none
	}

	.btswitch-ios:checked+.btswitch-btn:active:after {
		margin-left: -.8em
	}
	.switcher{
		padding-top:5px;
	}
</style>
<style>
	.modal.left .modal-dialog,.modal.right .modal-dialog{position:fixed;margin:auto;height:100%;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	.modal.left .modal-content,.modal.right .modal-content{height:100%;overflow-y:auto}
	.modal.left .modal-body,.modal.right .modal-body{padding:15px 15px 80px}
	.modal.left.fade .modal-dialog{left:-320px;-webkit-transition:opacity .3s linear,left .3s ease-out;-moz-transition:opacity .3s linear,left .3s ease-out;-o-transition:opacity .3s linear,left .3s ease-out;transition:opacity .3s linear,left .3s ease-out}
	.modal.left.fade.in .modal-dialog{left:0}
	.modal.right.fade .modal-dialog{right:-320px;-webkit-transition:opacity .3s linear,right .3s ease-out;-moz-transition:opacity .3s linear,right .3s ease-out;-o-transition:opacity .3s linear,right .3s ease-out;transition:opacity .3s linear,right .3s ease-out}
	.modal.right.fade.in .modal-dialog{right:0}
	.modal-content{border-radius:0;border:none}
	.modal-header{border-bottom-color:#eee;background-color:#fafafa}
</style>
<link href="lib/datatables/1.10.4/dataTables.bootstrap.css" rel="stylesheet">
<script src="lib/datatables/1.10.4/jquery.dataTables.js"></script>
<script src="lib/datatables/1.10.4/dataTables.bootstrap.js"></script>
<!--要在最下面设置全局参数-->
<script src="lib/datatables/1.10.4/dataTables.extend.js"></script>
<!--改后的源码支持异步加载-->
<script src="lib/treeview/bootstrap-treeview.js"></script>
<link href="lib/treeview/bootstrap-treeview.min.css" rel="stylesheet">
<link rel="stylesheet" href="lib/select/bootstrap-select.min.css">
<script src="lib/select/bootstrap-select.min.js"></script>
<script src="lib/laytpl.js"></script>
<script src="js/page/form/control.js"></script>
<link rel="stylesheet" href="js/page/form/control.css">
<script src="lib/bootbox/5.5.2/bootbox.min.js"></script>
<script type="text/javascript">

</script>